<div>

  <!-- Show pagination and content if there is file content. -->
  <div ng-if="controller.hexDataRows.length">

    <div>
      <ul uib-pagination total-items="controller.pageCount" items-per-page="1"
          max-size="10" rotate="false" boundary-links="true"
          ng-model="controller.page" ng-if="controller.pageCount > 1">
      </ul>
    </div>

    <!-- Show the hex view using three separate tables to enable vertical selection. -->
    <div class="monospace">
      <table>
        <tr>
          <th>Offset</th>
          <th>000102030405060708090a0b0c0d0e0f101112131415161718191a1b1c1d1e1f</th>
          <th></th>
        </tr>
        <tr>
          <td>
            <!-- Offset -->
            <table class="offset-area">
              <tr ng-repeat="row in controller.hexDataRows">
                <td class="offset">
                  {$ ::row.offset | grrHexNumber $}
                </td>
              </tr>
            </table>
          </td>
          <td>
            <!-- Hex -->
            <table class="hex-area">
              <tr ng-repeat="row in controller.hexDataRows">
                <td>
                  {$ ::row.data | grrBytesToHex $}
                </td>
              </tr>
            </table>
          </td>
          <td>
            <!-- Content -->
            <table class="content-area">
              <tr ng-repeat="row in controller.hexDataRows">
                <td class="data">
                  {$ ::row.data $}
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>

    <div>
      <ul uib-pagination total-items="controller.pageCount" items-per-page="1"
          max-size="10" rotate="false" boundary-links="true"
          ng-model="controller.page" ng-if="controller.pageCount > 1">
      </ul>
    </div>

  </div>

  <!-- Show a hint if no content exists. -->
  <div ng-if="!controller.hexDataRows.length" class="no-content">
    No file content to show.
  </div>

</div>
